<template>
  <div>
    <nav-bar></nav-bar>
    <div class="personal-page order">
      <div>
        <el-select v-model="value" placeholder="选择订单" @change="handleChange">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >
          </el-option>
        </el-select>
      </div>
      <div v-loading.body="loading">
        <no-content v-if="!loading && (!order || order.length === 0)" text="暂无订单"></no-content>
        <table class="xyd-order-list" v-if="order && order.length !== 0">
          <thead class="xyd-order-head">
            <tr>
              <th>商品</th>
              <th>单价</th>
              <th>数量</th>
              <th>实付款</th>
              <th>订单状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <order-item
            :value="item"
            v-for="item,i in order"
            :key="i"
            @delete="handleDelete"
            @cancel="handleCancel"
            @view="handleView"
            @apply="handleApply"
            @pay="handlePay"
          >
          </order-item>
        </table>
      </div>
      <div class="pagination-container">
        <el-pagination
          v-if="order && order.length !== 0"
          :page-size="offset"
          layout="prev, pager, next"
          :total="total"
          :current-page="page"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { NavBar } from 'views/layout'
  import { getOrder } from 'api/user'
  import OrderItem from '@/views/components/orderItem'
  import { deleteOrder, cancelOrder, viewExp } from 'api/shop'
  import { NoContent } from 'components/Sit'

  export default {
    name: 'Listen',
    components: {
      NavBar,
      OrderItem,
      NoContent
    },
    data() {
      return {
        tabs: ['语典书城', '语典好物'],
        indexTab: '语典书城',
        name: this.$route.name,
        order: [],
        total: 0,
        page: 1,
        offset: 10,
        loading: false,
        options: [{
          value: '',
          label: '全部'
        }, {
          value: '0',
          label: '待付款'
        }, {
          value: '1',
          label: '待发货'
        }, {
          value: '2',
          label: '待收货'
        }, {
          value: '3',
          label: '待评价'
        }],
        value: ''
      }
    },
    created() {
      const { type } = this.$route.query
      this.loading = true
      getOrder({
        status: '',
        plat: type,
        page: 1
      })
      .then(res => {
        console.log(res)
        this.loading = false
        this.order = res.data.order
        this.total = res.data.page.last_page * this.offset
      })
      .catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    methods: {
      fetchData(params = {}) {
        this.loading = true
        getOrder({
          status: this.value,
          plat: this.tabs.indexOf(this.indexTab),
          page: 1,
          ...params
        })
        .then(res => {
          console.log(res)
          this.loading = false
          this.order = res.data.order
          this.total = res.data.page.last_page * this.offset
        })
        .catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      handleChange() {
        this.page = 1
        this.fetchData()
      },
      handleDelete(item) {
        this.$confirm('删除订单后，该订单将不展示在列表中，确定继续吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteOrder({
            order_no: item.order_no
          })
          .then(res => {
            console.log(res)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          })
          .catch(err => {
            this.$message({
              type: 'error',
              message: err.msg
            })
            location.reload()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleCancel(item) {
        this.$confirm('确定取消该订单吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cancelOrder({
            order_no: item.order_no
          })
          .then(res => {
            console.log(res)
            this.$message({
              type: 'success',
              message: '订单取消成功!'
            })
            this.fetchData()
          })
          .catch(err => {
            this.$message({
              type: 'error',
              message: err.msg
            })
            location.reload()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleView(item) {
        console.log(item)
      },
      handleApply(item) {
        console.log(item)
      },
      handlePay(item) {
        console.log(item)
      },
      handlePageChange(page) {
        this.page = page
        this.fetchData({ page })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.personal-page.order{
  width: 1200px;
  margin: 0 auto;
  padding: 20px 40px;
  border: none;
  table.xyd-order-list{
    width: 100%;
    thead.xyd-order-head{
      border-bottom: 1px solid #e5e6e7;
      >tr{
        >th{
          height: 40px;
        }
      }
    }
  }
}
</style>
